<template>
  <el-drawer v-model="drawerVisible" title="搜索" direction="rtl" size="350px">
    <template #header>
      <span class="text-16px font-700">搜索</span>
    </template>
    <div class="search-drawer" style="height: 100%">
      <el-form
        ref="queryFormRef"
        :inline="true"
        :model="queryParams"
        class="-mb-15px"
        label-width="68px"
      >
        <el-form-item label="商品名称" prop="waresName">
          <el-input
            v-model="queryParams.waresName"
            placeholder="请输入商品名称"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="货类代码" prop="goodsCode">
          <el-input
            v-model="queryParams.goodsCode"
            placeholder="请输入货类代码"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item
          label="商品类型"
          prop="waresType"
        >
          <el-select
            v-model="queryParams.waresType"
            placeholder="请选择商品类型"
            style="width: 240px"
          >
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.WARES_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="包装" prop="waresPack">
          <el-select
            v-model="queryParams.waresType"
            placeholder="请输入包装"
            style="width: 240px"
          >
            <el-option
              v-for="dict in getStrDictOptions(DICT_TYPE.PACK_TYPE)"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="重量" prop="waresWeight">
          <el-input
            v-model="queryParams.waresWeight"
            placeholder="请输入重量"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="体积" prop="waresVol">
          <el-input
            v-model="queryParams.waresVol"
            placeholder="请输入体积"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="长" prop="waresLong">
          <el-input
            v-model="queryParams.waresLong"
            placeholder="请输入长"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="宽" prop="waresWide">
          <el-input
            v-model="queryParams.waresWide"
            placeholder="请输入宽"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="高" prop="waresHigh">
          <el-input
            v-model="queryParams.waresHigh"
            placeholder="请输入高"
            clearable
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item label="规格型号" prop="waresModel">
          <el-input
            v-model="queryParams.waresModel"
            placeholder="请输入规格型号"
            clearable
            class="!w-240px"
          />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'
  import {DICT_TYPE, getStrDictOptions} from "@/utils/dict";

  // 定义 props 和 emits
  const props = defineProps({
    modelValue: {
      type: Object,
      required: true,
    }
  });

  const emit = defineEmits(['update:modelValue', 'search', 'reset']);

  // 控制抽屉显示
  const drawerVisible = ref(false);

  // 使用 computed 实现双向绑定
  const queryParams = computed({
    get: () => props.modelValue,
    set: (value) => emit('update:modelValue', value)
  });

  // 打开抽屉
  function open() {
    drawerVisible.value = true;
  }

  // 关闭抽屉
  function close() {
    drawerVisible.value = false;
  }

  // 搜索
  function search() {
    close();
    emit('search', queryParams.value);
  }

  const queryFormRef = ref()
  // 重置
  function reset() {
    queryFormRef.value.resetFields()
    emit('reset', queryParams.value);
  }

  // 暴露 open 方法
  defineExpose({
    open
  });
</script>

<style lang="scss" scoped>
  .search-drawer {
    ::v-deep {
      .el-form {
        height: 98%;
      }
    }
  }
</style>
